<template>
	<view :style="skin" class="flex flex-direction pageview">
		<zx-nav></zx-nav>
		<view class="group flex-sub" style="padding: 100rpx 80rpx">
			<view class="u-font-xxxl" style="padding-bottom: 50rpx; font-weight: 500">欢迎登录{{ appName }}</view>
			<template v-if="false">
				<view class="row flex"><input type="text" placeholder="请输入手机号码" class="flex-sub" @input="changeMobile" /></view>
				<view class="row flex align-center">
					<input type="text" placeholder="请输入验证码" class="flex-sub" @input="changeCode" />
					<view class="getcode" @tap="getcode">{{ codetxt }}</view>
				</view>
			</template>
			<view class="flex align-center tag u-m-t-40">
				<checkbox-group class="checkbox" @change="CheckboxChange">
					<checkbox class="green" :class="isRead ? 'checked' : ''" :checked="isRead" value="1"></checkbox>
				</checkbox-group>
				<text @tap="isRead = !isRead">我已阅读并同意</text>
				<navigator :url="'/pages/article/details?id=' + 15" class="u-primary">《服务协议》</navigator>
				和
				<navigator :url="'/pages/article/details?id=' + 16" class="u-primary">《隐私政策》</navigator>
			</view>
			<view class="u-m-t-50" v-if="false"><u-button @click="submitLogin" shape="circle" :disabled="btnDisabled" :loading="btnLoading" type="success">登录</u-button></view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-m-t-20">
				<u-button
					v-if="isRead"
					shape="circle"
					type="success"
					hover-class="btn-hover"
					open-type="getPhoneNumber"
					withCredentials="true"
					lang="zh_CN"
					color="#39b54a"
					@getphonenumber="wxGetPhoneNumber"
					:customStyle="{ fontSize: '28rpx' }"
				>
					使用手机号码快捷登录
				</u-button>
				<u-button v-else type="success" :customStyle="{ fontSize: '28rpx' }" color="#39b54a" shape="circle" hover-class="btn-hover" @tap="showRead">
					使用手机号码快捷登录
				</u-button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
// import { regPhone } from '@/utils/index';
import { mapState, mapMutations, mapActions } from 'vuex';
let num = 60;
export default {
	data() {
		return {
			phone: '',
			verify: '',
			codetxt: '获取验证码',
			isRead: false,
			opt: {}
		};
	},
	computed: {
		...mapState(['session_key', 'unionid', 'openid', 'pid'])
	},
	onLoad: function (t) {
		this.opt = t;
	},
	onShow() {
		//#ifdef MP-WEIXIN
		this.getWXCode();
		//#endif
	},
	methods: {
		...mapMutations(['SET_OPENID', 'updateIsLogin']),
		...mapActions(['getUserInfo', 'SetCarTotal']),
		changeMobile(e) {
			this.phone = e.detail.value;
		},
		changeCode(e) {
			this.verify = e.detail.value;
		},
		getcode() {
			let $me = this;
			if (num < 60) {
				return false;
			}
			if (uni.$u.test.mobile(this.phone)) {
				/* 设置倒计时 */
				$me.codetxt = num + 's';
				var timer = setInterval(function () {
					if (num == 1) {
						clearInterval(timer);
						$me.codetxt = '获取验证码';
						num = 60;
					} else {
						num--;
						$me.codetxt = num + 's';
					}
				}, 1000);
				/* 获取验证码 */
				this.$postAction(this.$api.getSms + this.phone).then(da => {
					uni.showToast({
						title: da.msg,
						icon: 'none'
					});
				});
			} else {
				uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				});
			}
		},
		wxGetPhoneNumber(e) {
			var $me = this;
			let param = {
				session_key: this.session_key,
				encryptedData: e.detail.encryptedData,
				iv: e.detail.iv
			};
			this.$postAction(this.$api.decrypt, param)
				.then(res => {
					if (res.code == 0 && res.data.phoneNumber) {
						this.login(res.data.phoneNumber);
					} else {
						uni.showToast({
							title: '换取手机号码失败',
							icon: 'none'
						});
					}
				})
				.catch(err => {});
		},
		submitLogin(phone) {
			let param = {
				phone: this.phone,
				verify: this.verify,
				openid: this.openid,
				invited: this.invited,
				unionid: this.unionid
			};
			if (!uni.$u.test.mobile(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号码',
					icon: 'none'
				});
				return;
			}
			if (!this.verify) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return;
			}
			if (!this.isRead) {
				this.showRead();
				return;
			}
			this.finish();
		},
		/* 登录 */
		finish: function () {
			let { pid, unionid, openid } = this;
			let param = {
				phone: this.phone,
				verify: this.verify,
				pid,
				unionid,
				openid
			};
			this.$postAction(this.$api.login, param).then(da => {
				if (da.code == 0) {
					uni.setStorageSync('login_type', da.data.login_type);
					uni.setStorageSync('token', da.data.token);
					this.updateIsLogin(true);
					this.getUserInfo();
					this.loginBack();
				}
				uni.showToast({
					title: da.msg,
					icon: 'none'
				});
			});
		},
		CheckboxChange(e) {
			let values = e.detail.value;
			this.isRead = values.length > 0;
		},
		showRead() {
			uni.showToast({
				icon: 'none',
				title: '请阅读并同意《服务协议》和《隐私政策》'
			});
		},
		loginBack: function () {
			switch (this.opt.backtype) {
				case '1':
					console.log('redirectTo 跳转'),
						uni.redirectTo({
							url: decodeURIComponent(this.opt.backpage)
						});
					break;

				case '2':
					console.log('switchTab 跳转'),
						uni.switchTab({
							url: decodeURIComponent(this.opt.backpage)
						});
					break;

				case '3':
					console.log('reLaunch 跳转'),
						uni.reLaunch({
							url: decodeURIComponent(this.opt.backpage)
						});
					break;

				default:
					console.log('navigateBack 跳转'),
						getCurrentPages().length > 1
							? uni.navigateBack({
									delta: 1
							  })
							: uni.switchTab({
									url: '/pages/mine/mine'
							  });
			}
		},
		getWXCode() {
			let $me = this;
			uni.login({
				provider: 'weixin',
				success: function (loginRes) {
					let code = loginRes.code;
					console.log('code', code);
					$me.getSessionkey(code);
				}
			});
		},
		getSessionkey(code) {
			this.$postAction(this.$api.getOpenid + code, null, {
				custom: {
					ShowLoading: false
				}
			}).then(res => {
				/* 存openid 到vuex */
				this.SET_OPENID(res.data);
			});
		},
		login(phone) {
			let { pid, unionid, openid } = this;
			let param = {
				phone,
				pid,
				unionid,
				openid
			};
			this.$postAction(this.$api.login, param).then(da => {
				if (da.code == 0) {
					uni.setStorageSync('login_type', da.data.login_type);
					uni.setStorageSync('token', da.data.token);
					this.updateIsLogin(true);
					this.getUserInfo();
					this.loginBack();
				}
				uni.showToast({
					title: da.msg,
					icon: 'none'
				});
			});
		}
	}
};
</script>

<style lang="scss">
page,
.pageview {
	height: 100%;
	width: 100%;
	background: #fff;
}

.group {
	font-size: 26upx;

	.row {
		border-bottom: 1px solid #e5e5e5;
		padding: 25upx 20upx;
		.getcode {
			color: #fff;
			width: 165upx;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			border-radius: 8upx;
			background-image: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
		}
	}
}

.btn {
	font-size: 32rpx;
	line-height: 100upx;
}
.checkbox {
	checkbox {
		transform: scale(0.8);
		margin-right: 10upx;
	}
}
</style>
